<template>
	<view style="padding-bottom: 50rpx;">
		<page-head :title="'课程表'" :headtype="2"></page-head>
		<view class="tagnav">
			<scroll-view class="scrollmain marginAuto" scroll-x="true" @scroll="scroll" scroll-left="0">
				<view class="tagnavmain marginAuto">
					<view class="naveach" 
					v-for="(item,index) in datas" :key="index"
					@click="navfun(item)" 
					:class="navac == item.id ? 'navactive':''">{{ item.title || '课程表' }}</view>
				</view>
			</scroll-view>
		</view>
		<view class="procedure1 marginAuto">
			<uv-parse :content="content"></uv-parse>
		</view>
		<!-- <view class="xstip marginAuto">
			<view class="xstiptitle">普通道路行驶</view>
			<view class="xstiptxt">基础知识，环车检查、仪表讲解、上路前调整、上路简单操作</view>
		</view> -->
		<!-- <view class="procedure1 marginAuto">
			<view class="procedurename">1、初步认识</view>
			<view class="procedurentxt">发动机启动/熄火，仪表盘，方向盘打法，灯光开关，雨刮器，档位，刹车油门</view>
		</view> -->
		<view class="marginAuto" style="width:600rpx;margin-top:60rpx;">
			<uv-button text="测试一下吧" @click="apifun.navigate('/pages/accompany/maketest')" :customStyle="{
				'background':'#1686F8',
				'color':'#ffffff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'100rpx'
			}"></uv-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				navac:'',
				datas:[],
				content:''
			};
		},
		onLoad() {
			this.initData()
		},
		methods: {
			initData(){
				this.apifun.unirequest('/api/partnerDrive/getCoachClassList','post',{},(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
						this.navac = datas[0].id;
						this.content = datas[0].content;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			navfun(item){
				this.navac = item.id;
				this.content = item.content;
			}
		},
	};
</script>

<style scoped lang="scss">
	.scrollmain {
		position: sticky;
		top:0;
		white-space: nowrap;
		width:95%;
	}
	.tagnav{
		position:sticky;
		top: 0;
		width: 100%;
		padding:30rpx 0rpx 24rpx;
		background: #fff;
		.tagnavmain{
			// width:94%;
			// display: flex;
			// justify-content:space-around;
			width:95%;
			.naveach {
				display: inline-block;
				margin: 0 10rpx;
				position: relative;
				min-width: 110rpx;
				padding: 0 20rpx;
				height: 60rpx;
				line-height:60rpx;
				color:#1686F8;
				border: 1px solid #1686F8;
				border-radius: 100rpx;
				font-size:30rpx;
				text-align: center;
				.naveachx {
					position: absolute;
					bottom: -10rpx;
					left: 50%;
					background: #fff;
					width: 50rpx;
					margin-left: -25rpx;
					height: 6rpx;
					border-radius: 100rpx;
					transition: background .5s;
				}
			}
			.navactive {
				color:#ffffff;
				background:linear-gradient(to bottom,#5694FF,#0661FF);
			}
		}
	}
	.xstip{
		width: 630rpx;
		padding: 16rpx 30rpx;
		border-radius:10rpx;
		margin-top: 20rpx;
		background: linear-gradient(to bottom, #E3F1FF,#FEFEFE);
		.xstiptitle{
			color: #05305B;
			font-size: 34rpx;
			line-height: 50rpx;
			font-weight: 600;
		}
		.xstiptxt{
			padding-top:10rpx;
			font-size:28rpx;
			color: #0D4884;
			line-height:40rpx;
		}
	}
	.procedure1{
		width: 630rpx;
		padding: 30rpx;
		background: #ffffff;
		border-radius:20rpx;
		margin-top: 20rpx;
		.procedurename{
			color: #222222;
			font-size: 34rpx;
			font-weight:600;
		}
		.procedurentxt{
			margin-top:20rpx;
			color:#333333;
			font-size: 28rpx;
		}
	}
</style>